<!DOCTYPE html>
<html lang="en">

<head>
    <title>My BCIT Project</title>
    <meta name="comp2800 template" content="My 2800 App">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles/Map.css">
    <script src="scripts/checklogin.js"></script>
    <!-- Bootstrap Library CSS JS CDN go here -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bcryptjs/2.4.3/bcrypt.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet"
        crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.js"
        crossorigin="anonymous"></script>
    <!-- Firebase 8 Library related CSS, JS, JQuery go here -->
    <script src="//cdn.bootcss.com/jquery/3.7.1/jquery.min.js"></script>
    <!-- Font Awesome -->
    <!-- Other libraries and styles of your own -->
    <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
    <!-- <link rel="stylesheet" href="./styles/style.css"> -->
<style>
        .review-card {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .rating-stars .fas.fa-star {
            color: #ffd700;
        }

        .nav-link.active {
            background: #0d6efd !important;
            color: white !important;
            border-radius: 20px;
        }

        .comment-text {
            font-size: 0.95rem;
        }

        .timestamp {
            color: #6c757d;
            font-size: 0.85rem;
        }
    </style>
</head>

<body>
    <!------------------------------>
    <!-- Your HTML Layout go here -->
    <!------------------------------>

    <!-- our own navbar goes here -->
    <nav id="navbarPlaceholder"></nav>

    <!-- the body of your page goes here -->
        <nav id="navbarPlaceholder"></nav>

        <div class="container py-5">
            <!-- 店铺导航 -->
            <ul class="nav nav-pills mb-4 justify-content-center" id="restaurantTabs">
                <li class="nav-item">
                    <a id="roast-goose-tab" class="nav-link active" href="#roast-goose" data-bs-toggle="tab">Bull
                        Devil's Roast Goose</a>
                </li>
                <li class="nav-item">
                    <a id="lo-mein-tab" class="nav-link" href="#lo-mein" data-bs-toggle="tab">He Fu Lo Mein</a>
                </li>
                <li class="nav-item">
                    <a id="barbecue-tab" class="nav-link" href="#barbecue" data-bs-toggle="tab">Korean Barbecue</a>
                </li>
            </ul>

            <!-- 评论内容 -->
            <div class="tab-content">
                <!-- 烧鹅店评论 -->
                <div class="tab-pane fade show active" id="roast-goose">
                    <div class="reviews-container" data-restaurant="1"></div>
                </div>

                <!-- 捞面店评论 -->
                <div class="tab-pane fade" id="lo-mein">
                    <div class="reviews-container" data-restaurant="2"></div>
                </div>

                <!-- 烧烤店评论 -->
                <div class="tab-pane fade" id="barbecue">
                    <div class="reviews-container" data-restaurant="3"></div>
                </div>
            </div>
        </div>

        <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
        <script>
            // 从 localStorage 加载指定餐厅的评论
            function loadReviews(restaurantId) {
                const reviews = JSON.parse(localStorage.getItem(`reviews_${restaurantId}`)) || [];
                const container = document.querySelector(`[data-restaurant="${restaurantId}"]`);
            
                // 渲染评论到页面（使用 Bootstrap 卡片样式）
                container.innerHTML = reviews.map(review => `
                    <div class="review-card">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <div class="rating-stars">
                                ${'<i class="fas fa-star"></i>'.repeat(review.rating)} <!-- 显示评分星标 -->
                            </div>
                            <span class="timestamp">${new Date(review.timestamp).toLocaleString()}</span> <!-- 显示时间 -->
                        </div>
                        <p class="comment-text mb-0">${review.comment}</p> <!-- 显示评论内容 -->
                    </div>
                `).join('');
            }

            // 解析 URL 中的餐厅 ID（例如：#restaurant=1）
            function getRestaurantIdFromUrl() {
                const hash = window.location.hash;
                const match = hash.match(/restaurant=(\d+)/);
                return match ? parseInt(match[1]) : 1; // 默认显示第一个餐厅
            }

            // 激活对应餐厅的选项卡（使用 Bootstrap Tab 组件）
            function activateTab(restaurantId) {
                // 餐厅 ID 与选项卡的映射（需与 HTML 中的 href 一致）
                const tabMap = {
                    1: '#roast-goose',    // 对应烧鹅店选项卡内容的 id
                    2: '#lo-mein',       // 对应捞面店选项卡内容的 id
                    3: '#barbecue'       // 对应烧烤店选项卡内容的 id
                };
                const targetTab = tabMap[restaurantId];
                if (targetTab) {
                    // 切换到目标选项卡
                    const tabTrigger = document.querySelector(`[href="${targetTab}"]`);
                    new bootstrap.Tab(tabTrigger).show();
                }
            }

            // 页面加载时初始化
            window.addEventListener('load', () => {
                const restaurantId = getRestaurantIdFromUrl();
                loadReviews(restaurantId); // 加载目标餐厅的评论
                activateTab(restaurantId); // 切换到目标选项卡
            });

            // 监听 URL 哈希变化（用户手动切换选项卡时触发）
            window.addEventListener('hashchange', () => {
                const restaurantId = getRestaurantIdFromUrl();
                loadReviews(restaurantId);
                activateTab(restaurantId);
            });
        </script>
        <!-- stuff -->

        <!-- our own footer goes here-->
        <nav id="footerPlaceholder"></nav>

        <!---------------------------------------------->
        <!-- Your own JavaScript functions go here    -->
        <!---------------------------------------------->
        <script src="./scripts/skeleton.js"></script>
        <script src="scripts/authentication.js" defer></script>
        <script src="./scripts/script.js"></script>
        <!-- <script src="./scripts/script.js"></script> -->

    </body>

</html>